<template>
  <view class="category">
    <view class="category-item" v-for="item in categoryList" :key="item.id">
      <image class="icon" :src="item.icon" mode="scaleToFill" />
      <text class="text">{{ item.name }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import type { CategoryItem } from '@/types/home'

defineProps<{
  categoryList: CategoryItem[]
}>()
</script>

<style lang="scss" scoped>
.category {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 328rpx;

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // box-sizing: border-box;

    .icon {
      width: 100rpx;
      height: 100rpx;
    }
    .text {
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>
